<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card1" shadow="never">
          <template #header>
            <div class="card-header">
              <el-dropdown @command="handleCommand">
                <el-button>
                  添加菜单 <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="menu in menuTypeListMap" :key="menu.value" :command="menu.value">{{
                        menu.label
                    }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          <div class="menu-list">
            <el-tree ref="treeRef" :expand-on-click-node="false" :highlight-current="true" :data="menuListData"
              @node-click="clickTree" show-checkbox node-key="id" default-expand-all :props="defaultProps" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card2" shadow="never">
          <template #header>
            <div class="card-header">
              <span>编辑菜单：{{ checkedMenu && checkedMenu.menuName }}</span>
            </div>
          </template>
          <div class="menu-form">
            <el-alert title="从菜单列表选择一项后，进行编辑" type="success" :closable="false" />
            <el-form :model="checkedMenu" label-width="90px">
              <el-form-item label="类型："> 侧边栏 </el-form-item>
              <el-form-item label="菜单类型:">
                <el-select v-model="checkedMenu.menuType" disabled class="el-select-widht">
                  <el-option v-for="item in menuTypeListMap" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="菜单名称:">
                <el-input v-model="checkedMenu.menuName" placeholder="请输入菜单名称" />
              </el-form-item>
              <el-form-item label="菜单顺序:">
                <el-input v-model="checkedMenu.orderNum" placeholder="请输入菜单顺序" />
              </el-form-item>
              <el-form-item label="菜单路径:">
                <el-input v-model="checkedMenu.path" placeholder="请输入菜单路径" />
              </el-form-item>
              <el-form-item label="菜单图标:">
                <el-popover placement="bottom-start" :width="540" v-model:visible="showChooseIcon" trigger="click"
                  @show="showSelectIcon">
                  <template #reference>
                    <el-input v-model="checkedMenu.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
                      <template #prefix>
                        <SvgIcon v-if="checkedMenu.icon" :icon-class="checkedMenu.icon" :name="checkedMenu.icon"
                          class="el-input__icon" style="height: 32px; width: 16px" />
                        <SvgIcon v-else icon-class="search" name="search" class="el-input__icon"
                          style="height: 32px; width: 16px" />
                      </template>
                    </el-input>
                  </template>
                  <IconSelect ref="iconSelectRef" @selected="selected" />
                </el-popover>
                <!-- <el-input v-model="checkedMenu.icon" placeholder="请输入菜单顺序" /> -->
              </el-form-item>
              <el-form-item label="菜单状态:">
                <el-select v-model="checkedMenu.status" class="el-select-widht">
                  <el-option v-for="item in menuStateList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">确认</el-button>
                <el-button @click="cancelClick">重置</el-button>
                <el-button @click="delClick" type="warning">删除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <MenuAdd :menuAddVisible="menuAddVisible" :pid="pid" :parentTitle="menuName"
      @menuAddVisibleClose="menuAddVisibleClose" @menuAddSuccess="menuAddSuccess" />
  </div>
</template>

<script setup lang="ts">
import MenuAdd from './component/MenuAdd.vue'
import { onMounted, ref } from 'vue'
import { getRouterList, deleteRouter, editRouter } from '@/api/router'
import { menuStateList, menuTypeListMap } from './config'

import IconSelect from "@/components/IconSelect/index.vue"
import SvgIcon from "@/components/SvgIcon/index.vue"


const showChooseIcon = ref(false); // 显示选择图标弹窗
const iconSelectRef = ref(null);
const menuListData = ref([]) // 菜单列表数据
const menuName = ref('') // 菜单名称
const treeRef = ref() // 菜单树
const checkedMenu = ref({ path: '', icon: '', menuName: '', orderNum: '0', status: '', menuType: '', id: null }) // 选中的菜单
const menuAddVisible = ref(false) // 添加菜单弹窗
const isChecked = ref(false) // 是否选中菜单
const defaultProps = {
  children: 'children',
  label: 'menuName'
}

onMounted(() => {
  getRouterListFun()
})

const getRouterListFun = async () => {
  const res = await getRouterList({ pageIndex: 1, pageSize: 1000 })
  if (res.errcode === 0) {
    menuListData.value = res.data.rows
  }
}

const handleCommand = (command: string) => {
  if (command === 'M') {
    menuName.value = '目录'
  } else {
    menuName.value = '菜单'
  }
  menuAddVisible.value = true
}
// 取消添加菜单
const menuAddVisibleClose = () => {
  console.log('取消添加')
  showChooseIcon.value = false;
  menuAddVisible.value = false
}
// 添加菜单成功
const menuAddSuccess = () => {
  console.log('添加成功')
  menuAddVisible.value = false
  getRouterListFun() // 刷新菜单列表
}
// 保存修改
const onSubmit = async () => {
  const params = {
    id: checkedMenu.value.id,
    menuName: checkedMenu.value.menuName,
    path: checkedMenu.value.path,
    icon: checkedMenu.value.icon,
    orderNum: checkedMenu.value.orderNum,
    status: checkedMenu.value.status,
    menuType: checkedMenu.value.menuType
  }
  const res = await editRouter(params)
  if (res.errcode === 0) {
    ElMessage.success('修改成功')
    getRouterListFun()
  } else {
    ElMessage.error(res.errmsg || '修改失败')
  }
  console.log('提交')
}
// 取消修改
const cancelClick = () => {
  console.log('重置')
}
// 删除菜单
const delClick = async () => {
  console.log('删除')
  if (checkedMenu.value.id) {
    const res = await deleteRouter(checkedMenu.value.id)
    if (res.errcode === 0) {
      ElMessage.success('删除成功')
      getRouterListFun()
    } else {
      ElMessage.error(res.errmsg || '删除失败')
    }
  }
}

const clickTree = (menuItem) => {
  console.log('点击菜单', menuItem)
  checkedMenu.value = menuItem
  isChecked.value = true
}



/** 展示下拉图标 */
const showSelectIcon = () => {
  iconSelectRef.value.reset();
  showChooseIcon.value = true;
}
/** 选择图标 */
const selected = (name) => {
  checkedMenu.value.icon = name;
  showChooseIcon.value = false;
}
// /** 关闭弹窗隐藏图标选择 */
// const handleClose = () => {
//   cancel();
//   showChooseIcon.value = false;
// }

</script>

<style lang="scss" scoped>
.el-select-widht {
  width: 100%;
}
</style>
